<template>
  <div>
    <header><nav-bar :title="name" /></header>
    <div class="cont">
      <div class="center-box">
        <div class="classification-list">
          <div class="classification-sbox">全部</div>
          <div class="classification-mbox">玻尿酸法令纹</div>
          <div class="classification-mbox">玻尿酸法令纹</div>
        </div>
        <div class="classification-list">
          <div class="classification-sbox">全部</div>
          <div class="classification-mbox">玻尿酸法令纹</div>
          <div class="classification-mbox">玻尿酸法令纹</div>
        </div>
        <div>
          <ul class="shopping-nav between-box">
            <li
              v-for="it in shopping_list"
              :key="it.value"
              @click="selectMenu(it)"
              :class="{ cls_flag: nowType == it.value }"
            >
              {{ it.l_ame }}
            </li>
          </ul>
          <div>
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              :immediate-check="false"
              @load="onLoad"
            >
              <component
                :is="nowType"
                :page="page"
                @setLoading="setLoading"
                :ref="nowType"
              />
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template> 

<script>
import navBar from "@/components/navBar";
import proSelected from "@/components/proSelected";
import commodity from "@/components/commodity";
import mechanism from "@/components/mechanism";
import doctor from "@/components/doctor";
export default {
  name: "",
  props: {},
  components: {
    navBar,
    proSelected,
    commodity,
    mechanism,
    doctor,
  },
  data() {
    return {
      finished: false,
      page: 1,
      loading: false,
      id: "",
      name: "",
      nowType: "proSelected",
      shopping_list: [
        { value: "proSelected", l_ame: "精选" },
        { value: "commodity", l_ame: "商品" },
        { value: "mechanism", l_ame: "机构" },
        { value: "doctor", l_ame: "医生" },
      ],
    };
  },
  methods: {
    onLoad() {
      //上拉加载事件
      this.page = this.page + 1;
      console.log(888);
      let nowType = this.nowType;
      this.$nextTick(() => {
        this.$refs[nowType].getGoodsList(true);
      });
    },
    setLoading(e) {
      console.log(e);
      this.loading = e;
      //改变父组件是的值
    },
    selectMenu(item) {
      //切换
      console.log(item);
      this.page = 1;
      this.nowType = item.value;
      let nowType = this.nowType;
      this.$nextTick(() => {
        this.$refs[nowType].getGoodsList(true);
      });
    },
  },

  created() {
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
    // console.log(this.id);
    // console.log(this.name);
  },

  mounted() {
          let nowType = this.nowType;
      this.$nextTick(() => {
        this.$refs[nowType].getGoodsList(true);
      });
  },

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
@import "../../../style/common.sass";
img {
  width: 100%;
  height: 100%;
}
//两端对齐
.between-box {
  display: flex;
  justify-content: space-between;
}
.cont {
  background-color: #f6f6f6;
  .center-box {
    padding: $layout-size;
    padding-top: 0.86rem;
    .classification-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-bottom: 0.65rem;
      color: #909090;
      .classification-sbox {
        background-color: #fff;
        width: 5rem;
        line-height: 1.78rem;
        height: 1.78rem;
        border-radius: 0.22rem;
        text-align: center;
        font-size: 0.76rem;
      }
      .classification-mbox {
        width: 7rem;
        text-align: center;
        height: 1.78rem;
        border-radius: 0.22rem;
        background-color: #fff;
        text-align: center;
        line-height: 1.78rem;
        font-size: 0.76rem;
      }
    }
    .shopping-nav {
      width: 100%;
      height: 1.22rem;
      padding: $layout-size;
      margin-bottom: 0.8rem;
      li {
        flex: 1;
        position: relative;
        text-align: center;
        font-size: 0.86rem;
        color: #909090;
        &::after {
          content: "";
          display: inline-block;
          right: 0;
          top: 0.35rem;
          position: absolute;
          width: 0.03rem;
          height: 0.54rem;
          background-color: #b4b4b4;
        }
      }
      & li:nth-last-of-type(1) {
        &::after {
          content: none;
        }
      }
      .cls_flag {
        color: #333333 !important;
      }
    }
    .shopping-con {
      width: 100%;
    }
  }
}
</style>